{% extends "base.html" %}

{% if app_info %}
{% block head_title %}{{ app_info.app_name }} for {{ app_info.institution.display_form }}{% endblock %}
{% endif %}


{% block more-js %}
<script type="text/javascript" src="/js/jquery/jquery.highlight-3.js"></script>

<script type="text/javascript" src="/js/jquery/jquery.simple.tree.js"></script>
<script type="text/javascript" src="/js/public.js"></script>


<!--<script language="JavaScript">//-->
{% endblock %}

{% block more-css %}

<!--<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/treeview/jquery.treeview.css" type="text/css" />//-->
<link type="text/css" rel="stylesheet" href="/stylesheets/public2.css" />
<link type="text/css" href="/stylesheets/jquery/ui.public.css" rel="stylesheet" />
<link type="text/css" href="/stylesheets/jquery/jquery.simple.tree.css" rel="stylesheet" />

{% endblock %}

{% block wrapper %}

<div id="wrapper">
{% block header %}
<!-- START BANNER //-->
<div id="banner">
        <div id="logo">
            <center><img src="/media/logo_back.JPG" /></center>
        </div>
        <div id="search">
           <h3>Search and Help Topics</h3>

        <div id="search-container">
        <select id="search-options">
                    <option value="elibrary"  style="width: auto">E-Library</option>
                    <option value="all"  style="width: auto">Global Search</option>
                    <option value="cataloger"  style="width: auto">Library Catalog</option>
                    <option value="help-topics"  style="width: auto">Help Topics</option>
                </select>
                <span class="id-search-div">
        <input id="search_terms" type="text" size="45" />
                <input type="button" onclick="Search()" value="Go" />
                </span>
                <a href="http://goldrush.coalliance.org/index.cfm?inst_code=001_WSC" target="_top"><img src="http://grweb.coalliance.org/images/stories/imgs/GR-golddot-logo.gif" width="120px" style="float:right;" border="0" alt="Gold Rush Journal Finder" /></a>
        </div>
        </div>

</div>
<!-- END BANNER DIV //-->
{% endblock %}

{% block contents %}
<!-- START DYNAMIC CONTENT DIV //-->
<div id="main">
        <h3>{% if app_info %}About {{ app_info.app_name }} {% else %}[APPLICATION INFO NOT KNOWN] <a href="/manage">SET-UP</a>{% endif %}</a></h3>
        <div id="main-menu">
            <p><span class="menu-item"><b><a id="pop" href="#">Popular Resources</a></b></span> | <span class="menu-item"><b><a id="sub" href="#">Subject</a></b></span> | <span class="menu-item"><b><a id="tit" href="#">Titles</a></b></span></p>
            <div id="popular-div">
                <ul class="simpleTree">
                    <li class="root" id="resource-root-1"><span>Popular Resources</span>
                        <ul>
	                    <!-- START POPULAR RESOURCES //-->
                            {% for resource in popular_resources %}
	   <li id="pop-resource-{{ forloop.counter }}"><span></span><a href="{{ resource.manifestation.access_address.value }}" target="_top">{{ resource.title.display_form }}</a>
	   <a href="#" onclick="DisplayEndeavor('{{ resource.key }}')"><img border="0" title="More about {{ resource.title.display_form }}" src="/media/information.png" /></a>
	   </li>
	                        {% endfor %}
	                    </ul>
	                    <!-- END POPULAR RESOURCES //-->
                </li>
                </ul>
            </div>
            <div id="subjects-div">
                            <ul class="simpleTree">
                    <li class="root" id="resource-root-1"><span>Subjects</span>
                        <ul>
<!-- START BROWSE SUBJECTS //-->
	  {% for subject in concepts %}
	    <li id="concept-{{ forloop.counter }}"><span>{{ subject.display_form }} ({{ subject.resources|length }})</span>
		<a href="#" onclick="DisplayCollection('{{ subject.display_form }}')"><img border="0" title="Get listings of all {{ subject.display_form}} resources" src="/media/information.png" /></a>
		<ul>
		{% for resource in subject.resources %}
		  <li id="concept-{{subject.display_form}}-r{{ forloop.counter}}"><span></span><a href="{{ resource.manifestation.access_address.value }}" target="_top">{{ resource.title.display_form }}</a>
		  <a href="#" onclick="DisplayEndeavor('{{ resource.key }}')"><img border="0" title="More about {{ resource.title.display_form }}" src="/media/information.png" /></a>

		  </li>
		{% endfor %}
		</ul>
		</li>
	  {% endfor %}
	  </ul>
	 <!-- END BROWSE SUBJECTS //-->
	 </li>
	 </ul>
            </div>
            <div id="titles-div">
                            <ul class="simpleTree">
                    <li class="root" id="resource-root-1"><span>Titles</span>
                        <ul>
<!-- START BROWSE TITLES //-->
	  {% for resource_alpha in resource_titles %}
	    <li id="title-{{forloop.counter}}"><span>{{ resource_alpha.0|upper }} ({{ resource_alpha.1|length }})</span>
		<a href="#" onclick="DisplayCollection('{{ resource_alpha.0 }}')"><img border="0" title="Get all resources that begin with {{ resource_alpha.0|upper }}" src="/media/information.png" /></a>
		<ul>
		 {% for resource in resource_alpha.1 %}
		  <li id="title-{{ resource_alpha.0 }}-r{{forloop.counter}}}"><span></span><a href="{{ resource.manifestation.access_address.value }}" target="_top">{{ resource.title.display_form}}</a>
		  <a href="#" onclick="DisplayEndeavor('{{ resource.key }}')"><img border="0" title="More about {{ resource.title.display_form }}" src="/media/information.png" /></a>

		  </li>
		 {% endfor %}
		</ul>
		</li>
	  {% endfor %}

	 <!-- END BROWSE TITLES //-->
	 </ul>
   </li>
   </ul>
            </div>
        </div>
        <div id="main-display-div">
                <p class="res-detail">
                {% if app_info %}
                <b>Description:</b><br/>{{ app_info.institution.display_form }} E-Library provides access to purchased electronic resources
                and vetted web-sites for your research needs. {{ app_info.app_name }} currently has {{ resource_info.total_purchased }} purchased
                resources and {{ resource_info.total_free }} research web-sites.</p>
                {% else %}
                [APPLICATION SETUP NOT COMPLETE, PLEASE GO TO <a href="/manage">SET-UP</a> interface]
                {% endif %}
                </p>
        </div>
</div>
<!-- END DYNAMIC CONTENT DIV //-->



{% endblock %}
</div>
<!-- END TREEVIEW ACORDIAN DIVs //-->



{% block body-js %}
<script>
        var simpleTreeCollection;
        $(document).ready(function() {

			simpleTreeCollection = $('.simpleTree').simpleTree({
				autoclose: true,
			    afterClick:function(node){
				  //alert("text-"+$('span:first',node).text());
				},
				afterDblClick:function(node){
				//alert("text-"+$('span:first',node).text());
				},
				afterMove:function(destination, source, pos){
				//alert("destination-"+$('span:first',destination).text()+" source-"+$('span:first',source).text()+" pos-"+pos);
				},
				afterAjax:function()
				{
				//alert('Loaded');
				},
				animate:true
				//,docToFolderConvert:true
		});

$("#search-options").change(function() {
            if($("#search-options").val() == "help-topics")
            {
                $(".id-search-div").html($("#search-help").html());
            }
            else
            {
                $(".id-search-div").html($("#search-in").html());
            }
            });

        });

/*
        $("#popular-div").hover(function() {
            mouse_inside = true;
            }, function() {
            mouse_inside = false;
        });

        $(document).click(function() {
        if(!mouse_inside)
        {
            $('#popular-div').hide();
            }
        });
*/
        $("#popular-div").css("visibility", "visible");

        $(document).click(function() {
            $("#popular-div").css("visibility", "hidden");
            $("#subjects-div").css("visibility", "hidden");
            $("#titles-div").css("visibility", "hidden");
        });

        $("#popular-div").click(function(e) {
            e.stopPropagation();
        });

        $("#subjects-div").click(function(e) {
            e.stopPropagation();
        });

        $("#titles-div").click(function(e) {
            e.stopPropagation()
        });

        $("#pop").click(function(e) {
        e.stopPropagation();
            if($("#popular-div").css("visibility") == "hidden")
            {
                $("#popular-div").css("visibility", "visible");
            }
            else {$("#popular-div").css("visibility", "hidden");}
            $("#subjects-div").css("visibility", "hidden");
            $("#titles-div").css("visibility", "hidden");
        });

        $("#sub").click(function(e) {
        e.stopPropagation();
            if($("#subjects-div").css("visibility") == "hidden")
            {
                $("#subjects-div").css("visibility", "visible");
            }
            else {$("#subjects-div").css("visibility", "hidden");}
            $("#popular-div").css("visibility", "hidden");
            $("#titles-div").css("visibility", "hidden");
        });

        $("#tit").click(function(e) {
        e.stopPropagation();
            if($("#titles-div").css("visibility") == "hidden")
            {
                $("#titles-div").css("visibility", "visible");
            }
            else {$("#titles-div").css("visibility", "hidden");}
            $("#popular-div").css("visibility", "hidden");
            $("#subjects-div").css("visibility", "hidden");
        });
</script>

<div id="secret">
    <div id="search-help">
        How do I <select class="question"id="id-howdoi-select" name="howdoi-select">
                        {% for item in howdois %}
                                <option value="{{ item.key }}"  style="width: auto">{{ item.question }}?</option>
                        {% endfor %}</select>
                        <button onclick="GetHelpTopic()">Answer</button></p>
    </div>
    <div id="search-in">
                <input id="search_terms" type="text" size="45" />
                <input type="button" onclick="Search()" value="Go" />
    </div>
</div>
{% endblock %}{% endblock %}

